<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Koledar</title>
    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
      /* blue: 176db3; red: c20000; green: 008f11 */
      body {
        font-family: Verdana;
        text-align: center;
        font-size: 13px;
        color: #666;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      .clear {
        clear: both;
      }
      #holder {
        margin: 0 auto;
        width: 925px;
      }
      .m { /* month */
        border: 1px solid #BBB;
        float: left;
        margin: 10px;
      }
      .m div:first-child { /* month name */
        border-bottom: 1px solid #eee; 
        font-size: 16px;
        font-weight: bold;
        color: #3877BA;
        padding: 4px;
      }
      /* --- Days --- */
      .m td {
        width: 20px;
        padding: 3px 10px;
      }
      .m td {
        border: 1px solid #eee;
      }
      .m td:first-child {
        border-left: none;
      }
      .m td:last-child {
        border-right: none;
      }
      .m tr:first-child td {
        border-top: none;
      }
      .m tr:last-child td {
        border-bottom: none;
      }
      .pm,  /* prev month days */
      .nm   /* next month days */ 
      { 
        opacity: 0.3;
      }
      /* --- Days --- End */
      /* --- Weekend --- */
      .m td:nth-last-child(2) {
        color: #b00000;
      }

      .m td:last-child {
        color: #b00000;
        font-weight: bold;
      }
      /* --- Weekend --- End */
      /* --- Work free days --- */
      /* .hd, .fd, .m td:nth-last-child(2), .m td:last-child { */
      .hd, .fd {

        background-color: #F7F7F7;
      }
      .cd, .hd, .fd {font-weight: bold;}
      .cd {}
      .hd {color: #B00000;}
      .fd {color: #008F11;}
      /* --- Work free days --- End */
      /* --- Toolbar --- */
      .tool {
        display: inline-block;
        margin: 0 10px;
        font-weight: bold;
        opacity: 0.5;
      }
      .tool:hover {
        cursor: pointer;
        opacity: 1;
      }
      #dYear, .tool {
        font-size: 15px;
      }
      /* --- Toolbar --- End */
    </style>
    <script>
      var months = ['januar', 'februar', 'marec', 'april', 'maj', 'junij', 'julij', 'avgust', 'september', 'oktober', 'november', 'december'];
      var dayNames = ['po', 'to', 'sr', 'ce', 'pe', 'so', 'ne'];
      var maxRows = 7;
      var holidays, freedays, days;

      function drawCalendar(holder) {
        var yearParam = getParameterByName('year');
        yearParam = (yearParam === undefined || yearParam === '') ? yearParam = new Date().getFullYear() : parseInt(yearParam);
        days = getTotalMonthDays();
        holidays = getHolidays(yearParam);
        freedays = getFreedays(yearParam);
        for (var i in months) {
          var m = getMonthElement(months[i]);
          $(m).append(getDays(parseInt(i), yearParam));
          $('#' + holder).append($(m));
        }
      }

      function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
      }

      function getMonthElement(name) {
        var m = $(document.createElement('div')).attr('class', 'm');
        $(m).append($(document.createElement('div')).text(name));
        return $(m);
      }

      function getDays(month, year) {
        var datee = new Date();
        datee.setFullYear(year, month, 1);
        return getMonthDays(datee, days);
      }

      function getMonthDays(date, totalMonthDays) {
        var firstDay = true;
        var table = document.createElement('table');
        var row = document.createElement('tr');
        $(table).append(row);
        for (var i in dayNames) {
          $(row).append('<td class="dn">' + dayNames[i] + '</td>');
        }
        for (var i = 1; i <= totalMonthDays[date.getMonth()]; i++) {
          var current = new Date();
          current.setFullYear(date.getFullYear(), date.getMonth(), i);
          var dayFix = current.getDay() - 1;
          dayFix = dayFix === -1 ? 6 : dayFix;
          if (firstDay && dayFix > 0) {
            row = document.createElement('tr');
            $(table).append(row);
            for (var d = 0; d < dayFix; d++) {
              $(row).append('<td class="pm">' + getPrevMonthDate(current, ((d - dayFix))).getDate() + '</td>');
            }
          }
          if (dayFix === 0) {
            row = document.createElement('tr');
            $(table).append(row);
            $(row).append(getDay(current));
          } else {
            $(row).append(getDay(current));
          }

          if ((i === totalMonthDays[date.getMonth()])) {
            var lastNextDay = 1;
            if (dayFix < 6) {
              for (var d = dayFix; d < 6; d++) {
                lastNextDay = ((d - dayFix) + 1) + 1;
                $(row).append('<td class="nm">' + getPrevMonthDate(current, ((d - dayFix) + 1)).getDate() + '</td>');
              }
            }
            if ($(table).children().children().length < maxRows) {
              row = document.createElement('tr');
              $(table).append(row);
              for (var d = 0; d <= 6; d++) {
                $(row).append('<td class="nm">' + getPrevMonthDate(current, (d + lastNextDay)).getDate() + '</td>');
              }
            }
          }
          firstDay = false;
        }
        return table;
      }

      function getDay(date) {
        return isHoliday(date, '<td>' + date.getDate() + '</td>');
      }

      function isHoliday(date, element) {
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        date.setHours(0, 0, 0, 0);
        if (date.getTime() === today.getTime()) {
          return $(element).addClass('cd');
        }
        for (var i in holidays) {
          if (date.getTime() === holidays[i].getTime())
            return $(element).addClass('hd');
        }
        for (var i in freedays) {
          if (date.getTime() === freedays[i].getTime())
            return $(element).addClass('fd');
        }
        return element;
      }

      function getPrevMonthDate(current, prevMonthDay) {
        var prevMonthDate = new Date(current);
        prevMonthDate = new Date(prevMonthDate.setDate(prevMonthDate.getDate() + prevMonthDay));
        return prevMonthDate;
      }

      /* --- Global --- */
      function getTotalMonthDays() {
        var current = new Date();
        var year = current.getFullYear();
        var totalDays = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        return totalDays;
      }

      function getFebDays(year) {
        if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
          return 29;
        } else {
          return 28;
        }
      }

      function getHolidays(year) {
        var _holidays = new Array();
        year = (year === undefined) ? new Date().getFullYear() : year;
        switch (year) {
          case 2013:
            _holidays.push(generateDate(2013, 1, 1));
            _holidays.push(generateDate(2013, 2, 8));
            _holidays.push(generateDate(2013, 4, 27));
            _holidays.push(generateDate(2013, 5, 1));
            _holidays.push(generateDate(2013, 5, 2));
            _holidays.push(generateDate(2013, 7, 25));
            _holidays.push(generateDate(2013, 8, 15));
            _holidays.push(generateDate(2013, 10, 31));
            _holidays.push(generateDate(2013, 11, 1));
            _holidays.push(generateDate(2013, 12, 25));
            _holidays.push(generateDate(2013, 12, 26));
            break;
          case 2014:
            _holidays.push(generateDate(2014, 1, 1));
            _holidays.push(generateDate(2014, 2, 8));
            _holidays.push(generateDate(2014, 4, 27));
            _holidays.push(generateDate(2014, 5, 1));
            _holidays.push(generateDate(2014, 5, 2));
            _holidays.push(generateDate(2014, 7, 25));
            _holidays.push(generateDate(2014, 8, 15));
            _holidays.push(generateDate(2014, 10, 31));
            _holidays.push(generateDate(2014, 11, 1));
            _holidays.push(generateDate(2014, 12, 25));
            _holidays.push(generateDate(2014, 12, 26));
            break;
        }
        return _holidays;
      }

      function getFreedays(year) {
        var freedays = new Array();
        if (year === undefined) {
          year = new Date().getFullYear();
        }
        switch (year) {
          case 2013:
            freedays.push(generateDate(2013, 12, 23));
            freedays.push(generateDate(2013, 12, 24));
            freedays.push(generateDate(2013, 12, 27));
            freedays.push(generateDate(2013, 12, 30));
            freedays.push(generateDate(2013, 12, 31));
            break;
          case 2014:
            freedays.push(generateDate(2014, 1, 2));
            freedays.push(generateDate(2014, 1, 3));
            freedays.push(generateDate(2014, 4, 28));
            freedays.push(generateDate(2014, 4, 29));
            freedays.push(generateDate(2014, 4, 30));
            freedays.push(generateDate(2014, 12, 29));
            freedays.push(generateDate(2014, 12, 30));
            freedays.push(generateDate(2014, 12, 31));
            break;
        }
        return freedays;
      }

      function generateDate(year, month, day) {
        var date = new Date();
        date.setFullYear(year, month - 1, day);
        date.setHours(0, 0, 0, 0);
        return date;
      }

      /* ---- Year handler ---- */

      /* ---- Year handler ---- End */
    </script>
  </head>
  <body>
    <div id="holder"></div>
    <script>drawCalendar('holder');</script>
    <div class="clear"></div>
    <div id="prevYear" class="tool">&#60;</div><span id="dYear">2013</span><div id="nextYear" class="tool">&#62;</div>
    <script>
      var paramYear = getParameterByName('year');
      paramYear = (paramYear === undefined || paramYear === null || paramYear === "") ? 2013 : paramYear;
      $('#dYear').text(paramYear);
      $('#prevYear').click(function() {
        var currentYear = parseInt($('#dYear').text());
        $('#dYear').text(--currentYear);
        window.location.search = '?' + $.param({year: currentYear});
      });
      $('#nextYear').click(function() {
        var currentYear = parseInt($('#dYear').text());
        $('#dYear').text(++currentYear);
        window.location.search = '?' + $.param({year: currentYear});
      });
    </script>
  </body>
</html>